<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 局域网视频学习系统</title>
    <link rel="stylesheet" href="css/common.css">
    <style>
        body {
            background: linear-gradient(135deg, #2E86AB 0%, #1A535C 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .login-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
            padding: 40px;
            width: 100%;
            max-width: 450px;
            margin: 20px;
        }

        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .login-logo {
            width: 80px;
            height: 80px;
            background: var(--primary-color);
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 32px;
            font-weight: bold;
        }

        .login-title {
            font-size: 24px;
            font-weight: bold;
            color: var(--neutral-dark);
            margin-bottom: 8px;
        }

        .login-subtitle {
            color: #666;
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 20px;
        }


        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--neutral-dark);
            font-size: 14px;
        }

        .form-control {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: #fafafa;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            background: white;
            box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.1);
        }

        .form-control.is-invalid {
            border-color: var(--error-color);
            background: #fff5f5;
        }

        .login-btn {
            width: 100%;
            padding: 16px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(46, 134, 171, 0.3);
        }

        .login-btn:hover {
            background: #1e5f7a;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(46, 134, 171, 0.4);
        }

        .login-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .login-footer {
            text-align: center;
            color: #666;
            font-size: 14px;
        }

        .login-footer a {
            color: var(--primary-color);
            text-decoration: none;
        }

        .login-footer a:hover {
            text-decoration: underline;
        }



        .loading {
            display: none;
            width: 20px;
            height: 20px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .error-message {
            color: var(--error-color);
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }

        .form-control::placeholder {
            color: #999;
            opacity: 1;
        }

        .login-footer {
            margin-top: 10px;
        }

        .login-footer a {
            color: var(--primary-color);
            font-weight: 500;
        }


        @media (max-width: 480px) {
            .login-container {
                margin: 10px;
                padding: 30px 20px;
            }
            
            .role-option {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <div class="login-logo">📚</div>
            <h1 class="login-title">局域网视频学习系统</h1>
            <p class="login-subtitle">请输入您的账户信息登录系统</p>
        </div>

        <form id="loginForm" data-validate>

            <div class="form-group">
                <label class="form-label" for="username">用户名</label>
                <input type="text" id="username" name="username" class="form-control" 
                       placeholder="请输入用户名" required>
                <div class="error-message" id="username-error"></div>
            </div>

            <div class="form-group">
                <label class="form-label" for="password">密码</label>
                <input type="password" id="password" name="password" class="form-control" 
                       placeholder="请输入密码" required>
                <div class="error-message" id="password-error"></div>
            </div>

            <button type="submit" class="login-btn" id="loginBtn">
                <span class="loading" id="loading"></span>
                <span id="loginText">登录</span>
            </button>
        </form>

        <div class="login-footer">
            <p>还没有账户？<a href="register.html">立即注册</a></p>
        </div>

    </div>

    <script src="js/common.js"></script>
    <script>


        // 表单提交
        document.getElementById('loginForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const loginData = {
                username: formData.get('username'),
                password: formData.get('password')
            };
            
            // 显示加载状态
            const loginBtn = document.getElementById('loginBtn');
            const loading = document.getElementById('loading');
            const loginText = document.getElementById('loginText');
            
            loginBtn.disabled = true;
            loading.style.display = 'inline-block';
            loginText.textContent = '登录中...';
            
            // 清除错误信息
            document.querySelectorAll('.error-message').forEach(el => {
                el.style.display = 'none';
            });
            document.querySelectorAll('.form-control').forEach(el => {
                el.classList.remove('is-invalid');
            });
            
            try {
                const response = await API.post('/user/login', loginData);
                
                if (response.success) {
                    Message.success('登录成功！');
                    
                    // 使用UserManager保存用户信息
                    UserManager.setCurrentUser(response.user);
                    
                    // 根据角色跳转
                    setTimeout(() => {
                        switch (response.user.role) {
                            case 0: // 管理员
                                window.location.href = 'admin/dashboard.html';
                                break;
                            case 1: // 老师
                                window.location.href = 'teacher/dashboard.html';
                                break;
                            case 2: // 学生
                                window.location.href = 'student/index.html';
                                break;
                            default:
                                window.location.href = 'index.html';
                        }
                    }, 1000);
                } else {
                    Message.error(response.message || '登录失败');
                }
            } catch (error) {
                console.error('登录错误:', error);
                Message.error('登录失败：' + error.message);
            } finally {
                // 恢复按钮状态
                loginBtn.disabled = false;
                loading.style.display = 'none';
                loginText.textContent = '登录';
            }
        });

        // 表单验证
        document.getElementById('loginForm').addEventListener('input', function(e) {
            const input = e.target;
            const errorEl = document.getElementById(input.name + '-error');
            
            if (input.value.trim()) {
                input.classList.remove('is-invalid');
                if (errorEl) errorEl.style.display = 'none';
            }
        });

        // 回车键登录
        document.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.getElementById('loginForm').dispatchEvent(new Event('submit'));
            }
        });

        // 检查是否已登录
        document.addEventListener('DOMContentLoaded', async function() {
            await UserManager.init();
            if (UserManager.isLoggedIn()) {
                const user = UserManager.getCurrentUser();
                switch (user.role) {
                    case 0:
                        window.location.href = 'admin/dashboard.html';
                        break;
                    case 1:
                        window.location.href = 'teacher/dashboard.html';
                        break;
                    case 2:
                        window.location.href = 'student/index.html';
                        break;
                }
            }
        });
    </script>
</body>
</html>
